<template>
  <div class="porter-work">
    <!-- 第一页：床位选择 -->
    <div v-if="currentPage === 1">
      <h2 class="text-center mb-4">请选择床位</h2>
      <div class="bed-container">
        <div class="bed-grid">
          <button
            v-for="bed in beds"
            :key="bed.id"
            class="bed-button"
            :class="{ 'bed-occupied': bed.occupied }"
            :disabled="bed.occupied"
            @click="selectBed(bed)"
          >
            {{ bed.name }}
          </button>
        </div>
      </div>
      <div class="bed-legend">
        <div class="legend-item">
          <div class="legend-box available"></div>
          <span>可选</span>
        </div>
        <div class="legend-item">
          <div class="legend-box occupied"></div>
          <span>禁用、不可选</span>
        </div>
      </div>
    </div>

    <!-- 第二页：护工消毒 -->
    <div v-if="currentPage === 2">
      <h2 class="text-center mb-4">护工消毒</h2>
      <div class="disinfection-form">
        <div class="checkbox-group">
          <label class="checkbox-item">
            <input type="checkbox" v-model="disinfectionItems.bedSheet">
            <span>更换床单</span>
          </label>
          <label class="checkbox-item">
            <input type="checkbox" v-model="disinfectionItems.quilt">
            <span>更换被褥</span>
          </label>
          <label class="checkbox-item">
            <input type="checkbox" v-model="disinfectionItems.liquidTest">
            <span>消毒液擦拭床头柜</span>
          </label>
          <label class="checkbox-item">
            <input type="checkbox" v-model="disinfectionItems.uvLight">
            <span>枕头紫外线照射</span>
          </label>
          <label class="checkbox-item">
            <input type="checkbox" v-model="disinfectionItems.mattress">
            <span>更换床垫</span>
          </label>
          <label class="checkbox-item">
            <input type="checkbox" v-model="disinfectionItems.discharge">
            <span>出院消毒</span>
          </label>
        </div>
        <div class="button-group">
          <button class="btn-confirm" @click="submitDisinfection">确定</button>
          <button class="btn-cancel" @click="cancel">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PorterWork',
  data() {
    return {
      currentPage: 1,
      selectedBed: null,
      beds: [
        { id: 1, name: '01床 美杜莎', occupied: false },
        { id: 2, name: '02床 萧燕儿', occupied: false },
        { id: 3, name: '03床 云韵', occupied: false },
        { id: 4, name: '04床 美杜莎', occupied: false },
        { id: 5, name: '05床 萧燕儿', occupied: false },
        { id: 6, name: '06床 云韵', occupied: false },
        { id: 7, name: '07床 暂无', occupied: true },
        { id: 8, name: '08床 暂无', occupied: true },
        { id: 9, name: '09床 暂无', occupied: true },
        { id: 10, name: '11床 暂无', occupied: true },
        { id: 11, name: '12床 暂无', occupied: true },
        { id: 12, name: '13床 暂无', occupied: true },
      ],
      disinfectionItems: {
        bedSheet: false,
        quilt: false,
        liquidTest: false,
        uvLight: false,
        mattress: false,
        discharge: false
      },
      bedRecords: {}
    }
  },
  methods: {
    selectBed(bed) {
      this.selectedBed = bed;
      if (this.bedRecords[bed.id]) {
        this.disinfectionItems = { ...this.bedRecords[bed.id] };
      } else {
        this.resetDisinfectionItems();
      }
      this.currentPage = 2;
    },
    submitDisinfection() {
      if (this.selectedBed) {
        this.bedRecords[this.selectedBed.id] = { ...this.disinfectionItems };
      }
      
      console.log('提交消毒信息:', {
        bed: this.selectedBed,
        disinfectionItems: this.disinfectionItems
      });
      this.$message.success('提交成功');
      this.resetForm();
    },
    cancel() {
      this.resetForm();
    },
    resetForm() {
      this.currentPage = 1;
      this.selectedBed = null;
      this.resetDisinfectionItems();
    },
    resetDisinfectionItems() {
      Object.keys(this.disinfectionItems).forEach(key => {
        this.disinfectionItems[key] = false;
      });
    }
  }
}
</script>

<style scoped>
.porter-work {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.bed-container {
  margin: 20px 0;
}

.bed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.bed-button {
  padding: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.3s;
}

.bed-button:not(.bed-occupied):hover {
  background-color: #ecf5ff;
  border-color: #409eff;
}

.bed-occupied {
  background-color: #f5f7fa;
  color: #909399;
  cursor: not-allowed;
}

.bed-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-box {
  width: 20px;
  height: 20px;
  border: 1px solid #dcdfe6;
}

.legend-box.available {
  background-color: #fff;
}

.legend-box.occupied {
  background-color: #f5f7fa;
}

.disinfection-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.checkbox-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.btn-confirm,
.btn-cancel {
  padding: 10px 30px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-confirm {
  background-color: #409eff;
  color: #fff;
}

.btn-confirm:hover {
  background-color: #66b1ff;
}

.btn-cancel {
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
  color: #606266;
}

.btn-cancel:hover {
  color: #409eff;
  border-color: #409eff;
  background-color: #ecf5ff;
}
</style>
